ARTICLES > Web Programming

Bootstrap modal confirm box Turn Back

2017-02-01 14:28:26

 
Modal popup for confirm before send post data 
<form id="form">
<button type="submit" class="btn btn-success" onclick="return preSave();">บันทึกข้อมูล</button>
</form>
 
 
<div aria-hidden="true" aria-labelledby="myModalLabel" class="modal fade" id="myModal" role="dialog" style="display: none" tabindex="-1">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button aria-hidden="true" class="close" data-dismiss="modal" type="button">&times;</button>
            <h4 class="modal-title" id="myModalLabel">ยืนยันคำร้อง</h4>
         </div>
         <div class="modal-body">
            <p>เนื่องจากการแก้ไขระบบงาน มีความเสี่ยงในการดำเนินการ</p>
            <p>ท่านที่ร้องขอแก้ไข ในการการแก้ไขส่วนนี้ ต้องยอมรับในความเสี่ยงของการ<br />ติดตั้งระบบงานใหม่ หรือ แก้ไขข้อมูล</p>
            <p class="debug-url">
            <label><input id="ck_agree" onclick="agee()" type="checkbox" /><span style="color: #777"> ยอมรับเงื่อนไข</span></label></p>
          </div>
          <div class="modal-footer">
             <button class="btn btn-default" data-dismiss="modal" type="button">ยกเลิก</button>
             <button class="btn btn-success btn-ok" disabled="disabled" id="agree">ยอมรับ</button></div>
          </div>
      </div>
</div>
 
 
<script>
 
window.onbeforeunload = function(){
    if(!window.btn_clicked){
        return 'หากคุณออกจากนี้ ข้อมูลที่กรอกจะไม่ถูกบันทึก ต้องการดำเนินการต่อหรือไม่ ?';
    }
};
 
function preSave()
{
 
     $('#myModal').modal({ backdrop: 'static', keyboard: false })
        .one('click', '#agree', function() {
            window.btn_clicked = true;
            $('#form').trigger('submit');
     });
 
     return false;
 
}
 
</script>
 
 
Turn Back